﻿<template>
  <el-card class="operator-card my-8px" shadow="never">
    <el-row justify="center">
      <el-button
        type="primary"
        plain
        :icon="DocumentAdd"
        :disabled="isDetecting"
        @click="handleOpenDialog"
      >
        选择被检设备
      </el-button>
    </el-row>
    <el-row class="mt-8" justify="center">
      <el-radio-group v-model="isAutoDetect" :disabled="isDetecting">
        <el-radio-button v-model="isAutoDetect" label="自动检定" :value="true" />
        <el-radio-button v-model="isAutoDetect" label="手动检定" :value="false" />
      </el-radio-group>
    </el-row>
    <el-row class="my-3">
      <el-text class="mx-1">检定规程：</el-text>
      <el-select v-model="selectedRegulationId" :disabled="isDetecting">
        <el-option
          v-for="reg in selectRegulationNames"
          :key="reg.id"
          :value="reg.id"
          :label="reg.name"
        />
      </el-select>
    </el-row>
    <el-row class="mt-5" justify="center">
      <el-button v-show="showBtnStart" icon="CaretRight" type="success" @click="handleStart">
        开始
      </el-button>
      <el-button v-show="showBtnResume" icon="CaretRight" type="success" @click="handleResume">
        继续
      </el-button>
      <el-button v-show="showBtnPause" type="warning" @click="handlePause">暂停</el-button>
      <el-button v-show="showBtnStop" type="danger" @click="handleStop">停止</el-button>
    </el-row>
  </el-card>
  <!-- 弹窗 -->
  <el-dialog v-if="dialogVisible" v-model="dialogVisible" width="1100" title="选择被检仪器">
    <SensorSearch />
  </el-dialog>
  <!-- 弹窗 End -->
</template>

<script setup lang="ts">
import { DocumentAdd } from "@element-plus/icons-vue";
import regulationApi from "@/api/business/regulation.api";
import { useDetectStore } from "@/store/business/detect.store";
import { EnumDetectStatus } from "@/enums/business/detect.enum";
import SensorSearch from "@/views/business/sensor/components/SensorSearch.vue";
import DetectApi, { DetectStartParam, ToolModel } from "@/api/business/detect.api";
import { useSensorStore } from "@/store/business/sensor.store";
import { EventToken } from "@/enums/business/eventToken.enum";

const dialogVisible = ref(false);

const sensorStore = useSensorStore();
const detectStore = useDetectStore();
const { detectStatus, isDetecting } = storeToRefs(detectStore);

const isAutoDetect = ref(true);
const selectedRegulationId = ref<number>();
const selectRegulationNames = ref<Array<{ id: number; name: string }>>([]);

onMounted(() => {
  loadRegulations();
});

// region 检定按钮

const showBtnStart = ref(true);
const showBtnPause = ref(false);
const showBtnResume = ref(false);
const showBtnStop = ref(false);

watch(
  detectStatus,
  (newValue, oldValue) => {
    switch (newValue) {
      case EnumDetectStatus.NotReady:
        showBtnStart.value = true;
        showBtnPause.value = false;
        showBtnStop.value = false;
        showBtnResume.value = false;
        break;
      case EnumDetectStatus.Ready:
        showBtnStart.value = true;
        showBtnPause.value = false;
        showBtnStop.value = false;
        showBtnResume.value = false;
        break;
      case EnumDetectStatus.Running:
        showBtnStart.value = false;
        showBtnPause.value = true;
        showBtnStop.value = true;
        showBtnResume.value = false;
        break;
      case EnumDetectStatus.Paused:
        showBtnStart.value = false;
        showBtnPause.value = false;
        showBtnStop.value = true;
        showBtnResume.value = true;
        break;
      case EnumDetectStatus.Finished:
      case EnumDetectStatus.Terminated:
        showBtnStart.value = false;
        showBtnPause.value = false;
        showBtnStop.value = false;
        showBtnResume.value = false;
        break;
    }
  },
  { immediate: true }
);

// endregion

// region 检定操作

const detectStartBus = useEventBus<string>(EventToken.DetectStart);

/**
 * 启动检定
 */
async function handleStart() {
  await DetectApi.ready();

  const regulationId = selectedRegulationId.value;
  if (!regulationId) {
    ElMessage.warning("请选择检定规程。");
    return;
  }
  const para: DetectStartParam = {
    useRobot: isAutoDetect.value,
    regulationId,
    toolingSensors: [],
  };
  for (const tool of sensorStore.allTools) {
    if (tool.stationNum <= 0 || !tool.sensors?.length) continue;
    const slots = tool.sensors.map((sensor, index) => ({
      slotNum: index + 1,
      sensorId: sensor.id,
      sensorCode: sensor.sensorCode,
      sensorName: sensor.sensorName,
    }));
    const toolParam: ToolModel = {
      toolCode: tool.toolCode,
      stationNum: tool.stationNum,
      slots,
    };
    para.toolingSensors.push(toolParam);
  }

  DetectApi.start(para).then(() => {
    console.log("▶️ 开始检测", para);
    detectStartBus.emit();
  });
}

/**
 * 暂停检测
 */
function handlePause() {
  DetectApi.pause().then(() => {
    console.log("⏸️ 暂停检测");
  });
}

/**
 * 恢复检测
 */
function handleResume() {
  DetectApi.resume().then(() => {
    console.log("▶️ 恢复检测");
  });
}

/**
 * 停止检测
 */
function handleStop() {
  DetectApi.stop().then(() => {
    console.log("⏹️ 停止检测");
  });
}

// endregion

function handleCloseDialog() {
  dialogVisible.value = false;
}
function handleOpenDialog() {
  dialogVisible.value = true;
}

/**
 * 加载规程
 */
function loadRegulations() {
  regulationApi.getList().then((data) => {
    selectRegulationNames.value = data.map((item) => {
      return {
        id: item.id,
        name: item.name,
      };
    });
  });
}
</script>

<style scoped lang="scss">
.operator-card {
  flex-shrink: 0;
}
.vertical-button {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center;
  gap: 4px;
}
</style>
